<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-form ref="form" :model="form" label-width="100px" style="width: 50%">
          <el-form-item label="vip返佣" prop="vip_commission_percentage">
            <el-input-number
              v-model="form.vip_commission_percentage"
              controls-position="right"
              placeholder="请输入vip返佣"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="svip返佣" prop="svip_commission_percentage">
            <el-input-number
              v-model="form.svip_commission_percentage"
              controls-position="right"
              placeholder="请输入svip返佣"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="普通用户返佣" prop="user_commission_per">
            <el-input-number
              v-model="form.user_commission_per"
              controls-position="right"
              placeholder="请输入普通用户返佣"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="最低提现金额" prop="min_withdraw">
            <el-input-number
              v-model="form.min_withdraw"
              controls-position="right"
              placeholder="请输入最低提现金额"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label="提现手续费" prop="commission_withdraw">
            <el-input-number
              v-model="form.commission_withdraw"
              controls-position="right"
              placeholder="请输入提现手续费"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
          <p>特殊返佣设置</p>
          <el-form-item label="svip特别返佣">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="svip_commission_course_id">
                  <el-select
                    v-model="form.svip_commission_course_id"
                    filterable
                    placeholder="请选择科目"
                    style="width: 100%"
                    multiple
                  >
                    <el-option
                      v-for="(item, index) in courseList"
                      :key="index"
                      :label="item.name"
                      :value="item.course_id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item prop="svip_commission_percentage_special">
                  <el-input-number
                    v-model="form.svip_commission_percentage_special"
                    controls-position="right"
                    placeholder="请输入提现手续费"
                    clearable
                    :style="{width: '100%'}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="vip特别返佣">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="vip_commission_course_id">
                  <el-select
                    v-model="form.vip_commission_course_id"
                    filterable
                    placeholder="请选择科目"
                    style="width: 100%"
                    multiple
                  >
                    <el-option
                      v-for="(item, index) in courseList"
                      :key="index"
                      :label="item.name"
                      :value="item.course_id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item prop="vip_commission_percentage_special">
                  <el-input-number
                    v-model="form.vip_commission_percentage_special"
                    controls-position="right"
                    placeholder="请输入提现手续费"
                    clearable
                    :style="{width: '100%'}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="普通特别返佣">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="user_commission_course_id">
                  <el-select
                    v-model="form.user_commission_course_id"
                    filterable
                    placeholder="请选择科目"
                    style="width: 100%"
                    multiple
                  >
                    <el-option
                      v-for="(item, index) in courseList"
                      :key="index"
                      :label="item.name"
                      :value="item.course_id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item prop="user_commission_per_special">
                  <el-input-number
                    v-model="form.user_commission_per_special"
                    controls-position="right"
                    placeholder="请输入提现手续费"
                    clearable
                    :style="{width: '100%'}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { getPromote, updatePromote } from '@/api/admin/sys-config'
import { listCourse } from '@/api/admin/sys-course'
export default {
  name: 'Parameter',
  data() {
    return {
      form: {},
      courseList: []
    }
  },
  created() {
    getPromote().then(response => {
      const { data } = response
      this.form = {
        ...data,
        svip_commission_course_id: data?.svip_commission_course_id.split(';').map(Number) || [],
        vip_commission_course_id: data?.vip_commission_course_id.split(';').map(Number) || [],
        user_commission_course_id: data?.user_commission_course_id.split(';').map(Number) || []
      }
    })
    listCourse({
      pageIndex: 1,
      pageSize: 1000,
      is_bind_offline: 1
    }).then(response => {
      this.courseList = response.data.list
    })
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updatePromote({
            ...this.form,
            svip_commission_course_id: this.form?.svip_commission_course_id.join(';') || '',
            vip_commission_course_id: this.form?.vip_commission_course_id.join(';') || '',
            user_commission_course_id: this.form?.user_commission_course_id.join(';') || ''
          }).then(res => {
            if (res.code === 200) {
              this.msgSuccess(res.msg)
            } else {
              this.msgError(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
